import React, { Component } from 'react'
import "./Colorstate.css"

export default class Colorstate extends Component {
    state={
        r:0,
        g:0,
        b:0,
        a:1
    }
    fn = (type)=>{
        return (e)=>{
            this.setState({
                [type]:e.target.value
            })
            

        }

    }
  render() {
    return (
      <div>
        <div  className='box' style={{background:`rgba(${this.state.r},${this.state.g},${this.state.b},${this.state.a}`}}>

        </div>
        <input  onChange={this.fn("r")} type="range" name="" id="" value={this.state.r} min="0" max={255} /> <br />
        <input  onChange={this.fn("g")} type="range" name="" id="" value={this.state.g} min="0" max={255} /><br />
        <input  onChange={this.fn("b")} type="range" name="" id="" value={this.state.b} min="0" max={255} /> <br />
        <input  onChange={this.fn("a")} type="range" name="" id="" value={this.state.a} min="0" max={1} step="0.1" /> <br />
      </div>
    )
  }
}
